<template>
	<div class="page-wrap" @click="setView">
		<div class="page-inner">
			<div class="page-ctx-wrap">
				<div class="form-box">
					<!-- 基础信息 -->
					<div class="section-box section-base">
						<!--  @confirm="confirmFormSubmit" -->
						<w_form_product ref="w_form_product" />
						<!-- 	<div class="section-title">基础信息</div>
						<div class="input-item">
							<div class="input-box">
								<div class="label required">商品名称</div>
								<div class="val">
									<el-input clearable="" v-model="form.title" placeholder=""> </el-input>
								</div>
							</div>
						</div> -->
					</div>
					<!-- 基础信息 -->

					<!-- 上传文件 -->
					<div class="section-box section-params">
						<div class="section-title">上传文件</div>
						<div class="section-ctx">
							<div class="loop-wrap">
								<div class="table-sec">
									<div class="factorAdd">
										<span></span>
										<el-button type="primary" @click="addUrlRow">增加行数据</el-button>
									</div>
									<el-table :data="pr_pdf_url" stripe border>
										<el-table-column prop="name" label="名称" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.name">
													</el-input>
												</div>
											</template>
										</el-table-column>

										<el-table-column prop="url" label="文件" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-upload class="upload-demo" accept="/*"
														:action="mix_upload_action" :data="upload_uploadFile"
														:file-list="fileList" :limit="1"
														:on-success="(res, file, fileList) => do_on_success({ scope, res, file, fileList })">
														<el-button size="small" type="primary">点击上传</el-button>
													</el-upload>
													{{ scope.row.url }}
												</div>
											</template>
										</el-table-column>
										<el-table-column label="操作" width="50px">
											<template slot-scope="scope">
												<el-button size="mini" type="text"
													@click="(event) => deleteUrl(scope.$index, event)">删除</el-button>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</div>
					</div>
					<!-- 上传文件 -->

					<!-- 商品参数 -->
					<div class="section-box section-params" v-if="dataList_addrows.length">
						<div class="section-title">自定义参数</div>
						<div class="section-ctx">
							<div class="loop-wrap">
								<div class="table-sec">
									<div class="factorAdd">
										<span></span>
										<el-button type="primary" @click="addRow">增加行数据</el-button>
									</div>
									<el-table :data="dataList_addrows" stripe border>
										<el-table-column prop="name" label="参数名" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.name">
													</el-input>
												</div>
											</template>
										</el-table-column>

										<el-table-column prop="value" label="参数值" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.value">
													</el-input>
												</div>
											</template>
										</el-table-column>
										<el-table-column label="操作" width="80px">
											<template slot-scope="scope">
												<el-button size="mini" type="text" @click="deleteRow(scope.$index)">
													删除
												</el-button>
											</template>
										</el-table-column>
									</el-table>

								</div>
							</div>
						</div>
					</div>
					<!-- 商品参数 -->

					<!-- 配件添加 -->
					<!-- <div class="section-box section-guige" v-if="productType == 3"> -->
					<div class="section-box section-guige">
						<div class="section-title">配件添加</div>
						<div class="guige-inner">
							<!-- 多规格 -->
							<div class="guige-info-wrap" data-type="配件添加">
								<div class="section-ctx">
									<!-- 自定义多规格 -->
									<div class="loop-wrap">
										<div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
											<span></span>
											<el-button type="primary" @click="do_addNorm">增加</el-button>
										</div>
										<div class="table-sec">
											<table class="table-box table-box-guigezhi" cellpadding="0" cellspacing="0">
												<thead>
													<tr>
														<th data-col="id" style="width: 120px;">数据ID</th>
														<th data-col="keyIds" style="width: 120px;">规格ID</th>
														<th data-col="keyVals" style="width: 120px;">规格值</th>
														<th data-col="sn" style="width: 120px;">编码</th>
														<th data-col="code" style="width: 120px;">条码</th>
														<th data-col="weight" style="width: 120px;">重量</th>
														<th data-col="priceSale" style="width: 120px;">销售价格</th>
														<th data-col="priceMarket" style="width: 120px;">市场价</th>
														<th data-col="priceCost" style="width: 120px;">进价</th>
														<th data-col="priceTuan" style="width: 120px;">团购价</th>
														<th data-col="priceFanli" style="width: 120px;">返利金额</th>
														<th data-col="kucun" style="width: 120px;">库存</th>
														<th data-col="fu_parameter_json" style="width: 300px;">自定义参数
														</th>
														<th data-col="pdfJson" style="width: 300px;">pdf文件</th>
														<th data-col="del" style="width: 60px;">操作</th>
													</tr>
												</thead>
												<tbody>
													<tr class="loop-item" data-id="1"
														v-for="(guige, guige_index) in zdy_guigezhiList"
														:key="guige_index">
														<th data-col="id">
															<el-input v-model="guige.id" disabled
																placeholder="数据ID"></el-input>
														</th>
														<th data-col="keyIds">
															<el-input v-model="guige.keyIds" disabled
																placeholder="规格ID"></el-input>
														</th>
														<th data-col="keyVals">
															<el-input v-model="guige.keyVals" disabled
																placeholder="规格值"></el-input>
														</th>
														<th data-col="sn">
															<el-input v-model="guige.sn" placeholder="编码"></el-input>
														</th>
														<th data-col="code">
															<el-input v-model="guige.code" placeholder="条码"></el-input>
														</th>
														<th data-col="weight">
															<el-input v-model="guige.weight" placeholder="重量">
															</el-input>
														</th>
														<th data-col="priceSale">
															<el-input v-model="guige.priceSale" placeholder="销售价格"
																type="number"></el-input>
														</th>
														<th data-col="priceMarket">
															<el-input v-model="guige.priceMarket" placeholder="市场价"
																type="number"></el-input>
														</th>
														<th data-col="priceCost">
															<el-input v-model="guige.priceCost" placeholder="进价"
																type="number"></el-input>
														</th>
														<th data-col="priceTuan">
															<el-input v-model="guige.priceTuan" placeholder="团购价"
																type="number"></el-input>
														</th>
														<th data-col="priceFanli">
															<el-input v-model="guige.priceFanli" placeholder="返利金额"
																type="number"></el-input>
														</th>
														<th data-col="kucun">
															<el-input v-model="guige.kucun" placeholder="库存"
																type="number"></el-input>
														</th>
														<th data-col="fu_parameter_json">
															<div>
																<div
																	style="display: flex;justify-content: space-between;margin-bottom: 10px;">
																	<span></span>
																	<el-button type="primary"
																		@click="addRowNorm(guige, guige_index)">增加</el-button>
																</div>
																<el-table :data="guige.fu_parameter_json" stripe border>
																	<el-table-column prop="name" label="参数名"
																		width="auto">
																		<template slot-scope="scope">
																			<div class="params-box">
																				<el-input clearable=""
																					v-model="scope.row.name">
																				</el-input>
																			</div>
																		</template>
																	</el-table-column>

																	<el-table-column prop="value" label="参数值"
																		width="auto">
																		<template slot-scope="scope">
																			<div class="params-box">
																				<el-input clearable=""
																					v-model="scope.row.value">
																				</el-input>
																			</div>
																		</template>
																	</el-table-column>
																	<el-table-column label="操作" width="50px">
																		<template slot-scope="scope">
																			<el-button size="mini" type="text"
																				@click="(event) => deleteNorm(guige, guige_index, scope.$index, event)">删除</el-button>
																		</template>
																	</el-table-column>
																</el-table>
															</div>
														</th>
														<th data-col="pdfJson">
															<div>
																<div
																	style="display: flex;justify-content: space-between;margin-bottom: 10px;">
																	<span></span>
																	<el-button type="primary"
																		@click="addRowPdf(guige, guige_index)">增加</el-button>
																</div>
																<el-table :data="guige.pdfJson" stripe border>
																	<el-table-column prop="title" label="名称"
																		width="auto">
																		<template slot-scope="scope">
																			<div class="params-box">
																				<el-input clearable=""
																					v-model="scope.row.title">
																				</el-input>

																			</div>
																		</template>
																	</el-table-column>

																	<el-table-column prop="url" label="文件" width="auto">
																		<template slot-scope="scope">
																			<div class="params-box">
																				<el-upload class="upload-demo"
																					accept=".pdf"
																					:action="mix_upload_action"
																					:data="upload_uploadFile"
																					:file-list="fileList" :limit="1"
																					:on-success="(res, file, fileList) => do_on_success({ scope, res, file, fileList })">
																					<el-button size="small"
																						type="primary">点击上传</el-button>
																				</el-upload>
																				{{ scope.row.url }}
																			</div>
																		</template>
																	</el-table-column>
																	<el-table-column label="操作" width="50px">
																		<template slot-scope="scope">
																			<el-button size="mini" type="text"
																				@click="(event) => deletePdf(guige, guige_index, scope.$index, event)">删除</el-button>
																		</template>
																	</el-table-column>
																</el-table>
															</div>
														</th>
														<th data-col="del">
															<el-button size="mini" type="text"
																@click="del_addNorm(guige_index)">
																删除
															</el-button>
														</th>
													</tr>

													<!-- 更新所有规格 -->
												</tbody>
											</table>
										</div>
									</div>
									<!-- 循环数据 -->
								</div>
							</div>

						</div>
					</div>
					<!-- 配件添加 -->
				</div>

				<div class="footer-actions">
					<el-button @click="formCancel()"> 取消 </el-button>
					<!-- <el-button type="primary" plain @click="doSubmit(1)">
            发布并继续添加
          </el-button> -->
					<el-button type="primary" @click="fillData()"> 填充数据 </el-button>

					<el-button type="primary" @click="doSubmit(2)"> 发布 </el-button>
				</div>
			</div>
		</div>

		<el-dialog title="图片预览" :visible.sync="preview_image_is_show" width="800px">
			<div class="preview-box flex-center">
				<img :src="preview_image_url" alt="" style="object-fit: contain; width: 500px;height: 500px;" />
			</div>
			<!-- 		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		  </span> -->
		</el-dialog>

	</div>
</template>

<script>
import product_sku_upload_image from '@/components/product/product_sku_upload_image.vue';

import w_form_product from '@/components/base/w_form_product.vue';
import page_config from "@/constant/product/product-lists.js";
import page_mixin from "@/mixins/page_mixin.js";
import {
	mapState
} from "vuex";
export default {
	name: "part-form",
	mixins: [page_mixin],
	components: {
		product_sku_upload_image,
		w_form_product
	},
	data() {
		return {
			page_config,

			api_config: {},
			table_columns: [],
			table_row_actions: [],
			form_fields: [],
			form_fields_default_value: {},
			form_field_disabled_map: {},
			form_field_multiple_map: {},
			form_field_input_append_map: {},
			radio_options_map: {},
			select_config_map: {},
			tree_config_map: {},
			upload_config_map: {},
			upload_file_list: [],
			hidden_fields_in_table: [],
			hidden_fields_in_form: [],
			hidden_fields_in_detail: [],
			//

			//商品列表
			product_list: [],
			//
			customize_table: [], // 自定义参数表格
			//
			productid: '', //编辑时 产品id
			ggid: '', //编辑时 规格id
			status: '', //编辑时 规格id
			res_skus: [],
			info: {
				inventorys: [],
				skus: [],
				spec: [],
				moreProduct: [],
				productType: 3
			}, //产品详情

			form: {
				status: '',
				title: "",
				subtitle: "",
				jianjie: "",
				brandId: "",
				news: "",
				channelId: "",
				ordering: "",
				units: "",
				keywords: "",
				tags: "",
				thumb: "",
				images: "",
				pr_pdf_url: "",
				videoImg: "",
				videoUrl: "",
				cont1: "",
				cont2: "",
				cont3: "",
				yunfeiMoban: "",
				description: "",
				shareImg: "",
				isTuan: "",
				tuanNum: "",
				inventorys: "",
				sizeId: "",
				coatingId: "",
				materialId: "",
				thicknessId: "",
				// 新增
				changeProduct: "",
				productType: 3,
				moreProduct: ""
			},


			is_options: [{
				value: 1,
				label: '是'
			}, {
				value: 0,
				label: '否'
			}],

			//自定义上传文件
			pr_pdf_url: [
				{
					name: '',
					url: '',
				},
			],

			//商品自定义参数
			dataList_addrows: [
				{
					name: '',
					value: '',
				},
			],

			// productType: 1,
			duo_guigezhiList: [
				//  
				// {
				// 	id: '',
				// 	sn: "",
				// 	keyIds: "",
				// 	keyVals: "",
				// 	weight: '',
				// 	priceSale: "",
				// 	priceMarket: "",
				// 	priceCost: "",
				// 	priceTuan: "",
				// 	priceFanli: "",
				// 	kucun: '',
				// 	code: ""
				// },
			],
			zdy_guigezhiList: [
				{
					id: '',
					sn: "",
					keyIds: "",
					keyVals: "",
					weight: '',
					priceSale: "",
					priceMarket: "",
					priceCost: "",
					priceTuan: "",
					priceFanli: "",
					kucun: '',
					code: "",
					fu_parameter_json: [
						{
							name: '',
							value: '',
						},
					],
					pdfJson: [
						{
							title: '',
							url: ''
						}
					]
				},
			],
			sameInfo: {
				id: '',
				sn: "",
				keyIds: "",
				keyVals: "",
				weight: '',
				priceSale: "",
				priceMarket: "",
				priceCost: "",
				priceTuan: "",
				priceFanli: "",
				kucun: '',
				code: ""
			},


			//
			cacheMap: {
				//图片上传类型用来回显数据使用
				key: "",
			},
			cacheUrlMap: {},

			// 上传
			upload_col_name: "file",
			upload_other_data: {},
			upload_action: 'upload-url',
			dialogImageUrl: "",
			dialogVisible: false,

			upload_file_list: [],

			upload_uploadFile: {
				action: 'upload_uploadFile'
			},

			fileList: [],
			// 上传

			show: false,
			richEditorConfig: {},
			tinyIdList: [],

			// 标签
			tagList: [],
			tagInputVisible: false,
			tagInputValue: "",
			tagInputRef: "tagInputRef",
			// 标签

			// 级联选择
			cascaderOptions: [],
			// 级联选择

			// 树形选择
			treeData: [],
			treeProps: {
				label: "title",
				children: "child",
			},
			treeShowCheckbox: false,
			treeNodeKey: "id",
			defaultExpandAll: true,
			treePopWidth: "",
			treeSelectTitle: "",
			// 树形选择

			tableColumnsForParams: [{
				prop: "attribute",
				label: "参数",
				width: "auto",
				sortable: false,
			},
			{
				prop: "attributeValue",
				label: "参数值",
				width: "auto",
				sortable: false,
			},
			],

			productParamsList: [{
				attribute: "", //参数key
				attributeValue: "", //参数值
			},],


			//
			// 规格信息  单条的sku列表
			flat_sku_list: [
				// {}
			],
			guige_group_list: [
				//规格分组
				// {
				//   id: "",
				//   title: "尺寸",
				//   inputValue: '',
				//   inputVisible: false,
				//   child: [
				//     {
				//       id: "",
				//       title: "大",
				//     },
				//     {
				//       id: "",
				//       title: "小",
				//     },
				//   ],
				// },
				// {
				//   id: "",
				//   title: "颜色",
				//   inputValue: '',
				//   inputVisible: false,
				//   child: [
				//     {
				//       id: "",
				//       title: "红",
				//     },
				//     {
				//       id: "",
				//       title: "黄",
				//     },
				//   ],
				// },
			],
			add_inputVisible: false,
			add_inputValue: "",

			guigezhiList: [{
				// specifications: JSON.stringify(v),
				// specificationsText: v.join(","),
				// imgUrl: "",
				// goodsPrice: "",
				// goodsNum: "",
			},], //规格组合列表

			treeFlat: [],
			treePopWidth: "",

			// 商品标题
			channel_title: '',

			// 图片上传
			upload_data: {
				action: 'upload_uploadImg'
			},
			fileList_map: {},
			// imageUrl: '',

			preview_image_is_show: false,
			preview_image_url: '',
		};
	},
	computed: {},
	watch: {
	},
	created() {
		// 商品列表
		this.query_filters()
		this.setPageConfig();
		this.query_product_params(); //商品参数查询
		this.productid = this.$route.query.id || 0;
		this.ggid = this.$route.query.ggid || '';
		this.status = this.$route.query.status || '';
		if (this.productid) {
			// this.$nextTick(() => {
			// 	this.doRowEdit()
			// })
			this.query_detail();
		} else {
			this.$nextTick(() => {
				this.doAdd()
			})
		}
		this.querySelectOptions()
	},
	mounted() {
		this.handleDomAction();
	},
	methods: {
		query_filters() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "product_getList",
				}
			}).then(res => {
				if (res.code == 200) {
					this.product_list = res.data.list;
				}
			})
		},

		setPageConfig() {
			console.log('this.page_config', this.page_config)
			if (this.page_config) {
				this.api_config = this.page_config.api_config || {};
				this.table_columns = this.page_config.table_columns || [];
				this.table_row_actions = this.page_config.table_row_actions || [];
				this.form_fields = this.page_config.form_fields || [];
				this.form_fields_default_value = this.page_config.form_fields_default_value || {};
				this.form_field_disabled_map = this.page_config.form_field_disabled_map || {};
				this.form_field_multiple_map = this.page_config.form_field_multiple_map || {};
				this.form_field_input_append_map = this.page_config.form_field_input_append_map || {};
				this.radio_options_map = this.page_config.radio_options_map || {};
				this.select_config_map = this.page_config.select_config_map || {};
				this.tree_config_map = this.page_config.tree_config_map || {};
				this.upload_config_map = this.page_config.upload_config_map || {};
				this.upload_file_list = this.page_config.upload_file_list || [];
				this.hidden_fields_in_table = this.page_config.hidden_fields_in_table || [];
				this.hidden_fields_in_form = this.page_config.hidden_fields_in_form || [];
				this.hidden_fields_in_detail = this.page_config.hidden_fields_in_detail || [];
			} else {
				this.page_config = {
					api_config: this.api_config,
					table_columns: this.table_columns,
					table_row_actions: this.table_row_actions,
					form_fields: this.form_fields,
					form_fields_default_value: this.form_fields_default_value,
					form_field_disabled_map: this.form_field_disabled_map,
					form_field_multiple_map: this.form_field_multiple_map,
					form_field_input_append_map: this.form_field_input_append_map,
					radio_options_map: this.radio_options_map,
					select_config_map: this.select_config_map,
					tree_config_map: this.tree_config_map,
					upload_config_map: this.upload_config_map,
					upload_file_list: this.upload_file_list,
					hidden_fields_in_table: this.hidden_fields_in_table,
					hidden_fields_in_form: this.hidden_fields_in_form,
					hidden_fields_in_detail: this.hidden_fields_in_detail,
				}
			}
		},

		doAdd() {
			this.initFormModal()
			this.$refs.w_form_product.initAdd();
		},
		doRowEdit(row) {
			this.initFormModal()
			this.$refs.w_form_product.initEdit(row);
		},

		// 初始化弹窗
		initFormModal() {
			if (this.form_fields) {
				this.$log('form_fields', this.form_fields)
			}
			let option = {
				api_config: this.api_config,
				form_fields: this.form_fields,
				form_fields_default_value: this.form_fields_default_value,
				form_field_disabled_map: this.form_field_disabled_map,
				form_field_multiple_map: this.form_field_multiple_map,
				form_field_input_append_map: this.form_field_input_append_map,
				radio_options_map: this.radio_options_map,
				select_config_map: this.select_config_map,
				tree_config_map: this.tree_config_map,
				upload_config_map: this.upload_config_map,
				upload_file_list: this.upload_file_list,
			}
			this.$refs.w_form_product.initConfig(option);
		},

		querySelectOptions() {
			if (this.select_config_map) {
				for (var key in this.select_config_map) {
					let select_config = this.select_config_map[key];
					this.querySelectItem(select_config)
				}
			}
		},

		querySelectItem(select_config) {
			let {
				url,
				method,
				data,
			} = select_config.api || {}

			if (!data) {
				return
			}

			this.$api({
				url: url,
				method: method,
				data: {
					...data,
				},
			}).then((res) => {
				if (res.code == 200) {
					this.$log('查询 select 数据', res.data)
					if (select_config.resHasPagination) {
						select_config.options = res.data.list;
					} else {
						select_config.options = res.data;
					}
				}
			});
		},

		//商品标签
		query_product_params() {
			let select_config = this.select_config_map['tags']
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: 'product_getConfig',
				},
			}).then((res) => {
				if (res.code == 200) {
					let data = res.data;
					// this.$log('查询 select 数据', res.data)

					//商品标签
					select_config.options = data.tags.map(v => ({
						title: v,
						value: v,
					}));
					//自定义商品参数
					if (data.ifAddrows == 1 && data.parameter_json && data.parameter_json.length) {
						this.dataList_addrows = data.parameter_json.map(v => ({
							name: v,
							value: '',
						}))

						this.$log('商品参数配置', this.dataList_addrows)
					}
				}
			});
		},

		handleDomAction() {
			var $popBox = document.querySelector(".tree-box");
			if ($popBox) {
				this.treePopWidth = $popBox.getBoundingClientRect().width;
			}
		},

		setTreeSelectTitle() {
			// debugger;
			let cateId = +this.form.channelId
			if (this.treeFlat.length && cateId) {
				let cateItem = this.treeFlat.find((v) => v.id == cateId);
				console.log("当前商品所属分类", {
					...cateItem
				});
				if (cateItem) {
					this.treeSelectTitle = cateItem.title;
				}
			}
		},

		fillData() {
			// this.formColumns.forEach(v => {
			// 	if (v.col != 'id') {
			// 		this.form[v.col] = v.label
			// 	}
			// })
		},

		get_sort_ids(ids) {
			let id_arr = ids.split('-').map(id => parseInt(id))
			id_arr.sort((a, b) => (a - b))
			let sort_ids = id_arr.join('-')

			return sort_ids
		},

		query_detail() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "product_info",
					inventoryId: this.ggid,
					status: this.status,
				}
			}).then((res) => {
				if (res.code == 200) {
					let data = res.data;
					this.info = data;

					this.$nextTick(() => {
						this.doRowEdit(data)
					})

					if (data.pr_pdf_url) {
						let items = []
						data.pr_pdf_url.forEach(item => {
							let info = {
								name: item.name || '',
								url: item.url || '',
							}
							items.push(info)
						})
						this.pr_pdf_url = items;
					}
					// 自定义参数处理
					if (data.parameter_json) {
						let keys = Object.keys(data.parameter_json)
						if (keys && keys.length) {
							this.dataList_addrows = keys.map(key => ({
								name: key,
								value: data.parameter_json[key],
							}))
						}
					}

					if (data.moreProduct) {
						let more = []
						data.moreProduct.forEach(item => {
							let info = {
								id: item.id || '',
								sn: item.sn || '',
								keyIds: item.keyIds || '',
								keyVals: item.keyVals || '',
								weight: item.weight || '',
								priceSale: item.priceSale || '',
								priceMarket: item.priceMarket || '',
								priceCost: item.priceCost || '',
								priceTuan: item.priceTuan || '',
								priceFanli: item.priceFanli || '',
								kucun: item.kucun || '',
								code: item.code || '',
								fu_parameter_json: item.fu_parameter_json || "",
								pdfJson: item.pdfJson || ""
							}
							more.push(info)
						})
						this.zdy_guigezhiList = more;
						this.$log('设置多规格数据', this.zdy_guigezhiList)

					}
					// 基础信息回显
				}
			});
		},

		init_guige_group() {
			let guige_group_list = []
			let flat_sku_list = []
			//
			if (this.info.skus.length) {
				this.info.skus.forEach(v1 => {
					let child = []
					v1.childs.forEach(v2 => {
						child.push({
							id: v2.id,
							title: v2.title,
							thumb: v2.thumb,
						})

						flat_sku_list.push({
							id: v2.id,
							title: v2.title,
							parentId: v2.parentId,
						})


						if (v2.thumb) {
							this.fileList_map[v2.id] = [{
								url: v2.thumb,
								name: v2.id
							}]
						}
					})

					guige_group_list.push({
						id: v1.id,
						title: v1.title,
						inputValue: '',
						inputVisible: false,
						child: child
					})
				})
			}

			this.guige_group_list = guige_group_list
			this.flat_sku_list = flat_sku_list

			this.$log('规格 分组', this.guige_group_list)
			this.$log('规格 列表', this.flat_sku_list)


			//规格图片设置

		},

		formCancel() {
			this.$router.back();
		},
		setView() {
			// let form = this.$refs.w_form_product.get_form_params();
			// this.productType = form.productType
			// setTimeout(() => {
			// 	let form = this.$refs.w_form_product.get_form_params();
			// 	this.productType = form.productType;
			// }, 1000);
		},
		// get_form_params() {
		// },

		doSubmit(status) {
			// mode = 发布并继续添加 1 || 发布 2
			// let form = this.form
			let form = this.$refs.w_form_product.get_form_params();
			this.$log('产品表单数据 form', form)


			let empty_item = null;
			this.form_fields.forEach((item) => {
				if (item.is_required_in_form) {
					if (!empty_item) {
						let value = form[item.field];
						if (!value && typeof value == "string") {
							empty_item = item;
						}
					}
				}
			});

			//非空验证
			if (empty_item) {
				let msg = "请完善" + empty_item.field_title + "信息";
				alertErr(msg);
				return;
			}


			//标签内容
			// let tags = this.tagList.filter(v => !!v).join(',')
			//轮播图

			//商品标签
			let tags = '';
			if (form.tags) {
				tags = form.tags.join(',')
			}

			let pr_pdf_url = ''
			if (this.pr_pdf_url.length) {
				let arr = []
				this.pr_pdf_url.forEach(v => {
					arr.push(v)
				})
				pr_pdf_url = JSON.stringify(arr)
			}

			//商品参数
			let parameter_json = '';
			if (this.dataList_addrows.length) {
				let obj = {}
				this.dataList_addrows.forEach(v => {
					obj[v.name] = v.value;
				})
				parameter_json = JSON.stringify(obj)
			}

			// 处理配件添加
			let moreProduct = '';
			if (this.zdy_guigezhiList.length) {
				let items = []
				this.zdy_guigezhiList.forEach(item => {
					// let ggid = '';
					// if (!this.$route.query.id) { //新增
					// 	ggid = '';
					// } else { //编辑
					// 	let curr_sort_ids = this.get_sort_ids(item.keyIds)
					// 	let sku_item = this.info.inventorys.find(v => v.sort_ids == curr_sort_ids)
					// 	if (sku_item) {
					// 		ggid = sku_item.id
					// 	}
					// }
					let info = {
						id: item.id || '',
						// id: this.ggid || '',
						sn: item.sn || '',
						keyIds: item.keyIds || '',
						keyVals: item.keyVals || '',
						weight: item.weight || '',
						priceSale: item.priceSale || '',
						priceMarket: item.priceMarket || '',
						priceCost: item.priceCost || '',
						priceTuan: item.priceTuan || '',
						priceFanli: item.priceFanli || '',
						kucun: item.kucun || '',
						code: item.code || '',
						fu_parameter_json: item.fu_parameter_json || "",
						pdfJson: item.pdfJson || ""
					}
					items.push(info)
				})
				moreProduct = JSON.stringify(items)
			}

			let goods = {
				status: form.status || '',
				title: form.title || '',
				subtitle: form.subtitle || '',
				jianjie: form.jianjie || '',
				brandId: form.brandId || '',
				news: form.news.join(','),
				channelId: form.channelId || '',
				ordering: form.ordering || '',
				units: form.units || '',
				keywords: form.keywords || '',
				tags: tags || '', //特殊处理
				thumb: form.thumb || '',
				images: form.images || '', //特殊处理
				pr_pdf_url: pr_pdf_url || '',
				videoImg: form.videoImg || '',
				videoUrl: form.videoUrl || '',
				cont1: form.cont1 || '',
				cont2: form.cont2 || '',
				cont3: form.cont3 || '',
				yunfeiMoban: form.yunfeiMoban || '',
				description: form.description || '',
				shareImg: form.shareImg || '',
				isTuan: form.isTuan || '',
				tuanNum: form.tuanNum || '',

				productType: 3,
				parameter_json: parameter_json, //特殊处理商品参数
				moreProduct: moreProduct || "", //特殊处理配件添加

				sizeId: form.sizeId || "",
				coatingId: form.coatingId || "",
				materialId: form.materialId || "",
				thicknessId: form.thicknessId || "",
			};



			let params = {
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: 'product_save',
					...goods,
					id: this.productid || 0
				}
			};

			this.$logjson("要保存的商品信息 params", params);
			// return;

			this.$api(params).then((res) => {
				if (res.code == 200) {
					// if (status == 1) {
					//   //继续添加
					//   this.clearInfo();
					// } else if (status == 2) {
					//   //发布
					this.$message({
						message: '添加成功',
						type: 'success'
					});
					this.$router.back();
					// }
				}
			});
		},

		// 文件行删除
		deleteUrl(index) {
			console.log(index);

			this.pr_pdf_url.splice(index, 1);
		},
		// 文件行添加
		addUrlRow() {
			this.pr_pdf_url.push({ name: '', url: '' });
		},

		// 自定义参数列表行删除
		deleteRow(index) {
			this.dataList_addrows.splice(index, 1);
		},
		// 自定义参数列表
		addRow() {
			this.dataList_addrows.push({ name: '', value: '' });
		},

		// 配件列表行删除
		del_addNorm(index) {
			this.zdy_guigezhiList.splice(index, 1);
		},
		// 配件列表行添加
		do_addNorm() {
			const newRow = {
				id: '',
				keyIds: '',
				keyVals: '',
				sn: '',
				code: '',
				weight: '',
				priceSale: '',
				priceMarket: '',
				priceCost: '',
				priceTuan: '',
				priceFanli: '',
				kucun: '',
				fu_parameter_json: [{
					name: "",
					value: ""
				}],
				pdfJson: [{
					title: '',
					url: ''
				}]
			}
			this.zdy_guigezhiList.push(newRow)

		},
		// 自定义配件参数列表行删除
		deleteNorm(guige, guige_index, index, event) {
			event.stopPropagation();
			console.log('Received guige:', guige);
			console.log('Received guige_index:', guige_index);
			console.log('Received index:', index);
			guige.fu_parameter_json.splice(index, 1);
		},
		// 自定义配件参数列表
		addRowNorm(guige, guige_index) {
			guige.fu_parameter_json.push({ name: '', value: '' });
		},
		// pdf参数列表行删除
		deletePdf(guige, guige_index, index, event) {
			event.stopPropagation();
			console.log('Received guige:', guige);
			console.log('Received guige_index:', guige_index);
			console.log('Received index:', index);
			guige.pdfJson.splice(index, 1);
		},
		// pdf参数列表
		addRowPdf(guige, guige_index) {
			guige.pdfJson.push({ title: '', url: '' });
		},
		// 选项卡数据
		tabCardRowDelete(item, scope) {
			console.warn("表格行删除", {
				...item
			});
			console.warn("表格行删除", scope);
			// item.tabCardData.splice(scope.$index, 1);
		},
		tabCardAddItem(item) {
			let loopItem = JSON.parse(JSON.stringify(item.tabCardSingleItem));
			item.tabCardData.push(loopItem);
		},

		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},

		// 标签列表
		tagClose(tag) {
			this.tagList.splice(this.tagList.indexOf(tag), 1);
		},
		tagShowInput() {
			this.tagInputVisible = true;

			setTimeout(() => {
				this.$nextTick(() => {
					// this.$refs["tagInputRef"].$refs.input.focus();
					this.$refs["tagInputRef"][0].$refs.input.focus();
				});
			}, 50);
		},
		tagInputConfirm() {
			let tagInputValue = this.tagInputValue.trim();
			if (tagInputValue) {
				if (this.tagList.includes(tagInputValue)) {
					alertErr("型号已存在！");
					// return
				} else {
					this.tagList.push(tagInputValue);
				}
			}
			this.tagInputVisible = false;
			this.tagInputValue = "";
		},
		// 标签列表

		// 分类节点选择
		treeNodeClick(obj, node, self, item) {
			console.warn("nodeClick obj", obj,);
			console.warn("nodeClick node", node,);
			console.warn("nodeClick self", self,);
			console.warn("nodeClick item", item,);

			this.form[item.col] = obj.id;
			this.treeSelectTitle = obj.title;


			this.$refs["popoverTree"][0].doClose();
			// console.warn("弹窗", );
		},
		// 分类节点选择


		// 生成组合
		generateCombinations(arrays) {
			let result = [];
			// 递归函数，current 表示当前组合的元素数组，index 表示当前处理的数组索引  
			function combine(current, index) {
				// 如果已经处理完所有数组  
				if (index === arrays.length) {
					// 将当前组合添加到结果数组中  
					result.push(current.slice()); // 使用 slice() 创建一个副本  
					return;
				}
				// 遍历当前数组的每一个元素  
				for (let i = 0; i < arrays[index].length; i++) {
					// 将当前元素添加到当前组合中  
					current.push(arrays[index][i]);
					// 递归处理下一个数组  
					combine(current, index + 1);
					// 回溯，移除当前元素，为尝试下一个元素做准备  
					current.pop();
				}
			}

			// 初始化递归函数，从第一个数组开始  
			combine([], 0);
			return result;
		},

		test_all_zuhe() {
			// 示例  
			let arr1 = [1, 2];
			let arr2 = [3, 4, 5];
			let arr3 = ['a', 'b'];
			let combinations = this.generateCombinations([arr1, arr2, arr3]);
			console.log(combinations);
		},

		// 生成规格值列表
		generateGuigezhi() {
			this.$logjson("渲染规格分组", this.guige_group_list);

			// [1,2]
			// [3,4]
			// [5,6]
			// [7,8]
			// 1,3,5,6  1,3,5,8
			// let index = 0;
			// let all_list = [];
			let child_list = this.guige_group_list.map(v1 => v1.child)
			let all_zuhe = this.generateCombinations(child_list);

			this.$log('组合列表 all_zuhe', all_zuhe)




			// let xilie1 = this.guige_group_list[0];
			// let xilie2 = this.guige_group_list[1];
			// let xilie3 = this.guige_group_list[2];
			// let zuheList = [
			// 	// {
			// 	//   ids: [1,3],
			// 	//   titles: ['红色','大'],
			// 	// }
			// ];

			// if (xilie3 && xilie3.child.length) {
			// 	//双规格
			// 	xilie1.child.forEach((v1) => {
			// 		xilie2.child.forEach((v2) => {
			// 			xilie3.child.forEach((v3) => {

			// 				zuheList.push({
			// 					ids: [v1.id, v2.id, v3.id],
			// 					titles: [v1.title, v2.title, v3.title],
			// 				});
			// 			});
			// 		});
			// 	});
			// } else if (xilie2 && xilie2.child.length) {
			// 	//双规格
			// 	xilie1.child.forEach((v1) => {
			// 		xilie2.child.forEach((v2) => {

			// 			zuheList.push({
			// 				ids: [v1.id, v2.id],
			// 				titles: [v1.title, v2.title],
			// 			});
			// 		});
			// 	});
			// } else if (xilie1 && xilie1.child.length) {
			// 	//单规格
			// 	xilie1.child.forEach((v1) => {

			// 		zuheList.push({
			// 			ids: [v1.id],
			// 			titles: [v1.title],
			// 		});
			// 	});
			// }
			// console.warn("可选的商品组合列表", zuheList);

			let duo_guigezhiList = [];
			// zuheList.forEach((item) => {
			// 	let id = item.ids[item.ids.length - 1]
			// 	let keyIds = item.ids.join("-");
			// 	let keyVals = item.titles.join(",");
			// 	let info = {
			// 		id: id,
			// 		sn: "",
			// 		keyIds: keyIds || "",
			// 		keyVals: keyVals || '',
			// 		weight: '',
			// 		priceSale: "",
			// 		priceMarket: "",
			// 		priceCost: "",
			// 		priceTuan: "",
			// 		priceFanli: "",
			// 		kucun: '',
			// 		code: ""
			// 	};
			// 	duo_guigezhiList.push(info);
			// 	// this.cacheMap[info.specificationsText] = [];
			// });




			all_zuhe.forEach((arr) => {
				// let id = item.ids[item.ids.length - 1]
				let keyIds = arr.map(v => v.id).join("-");
				let keyVals = arr.map(v => v.title).join(",");
				let info = {
					id: '',
					sn: "",
					keyIds: keyIds || "",
					keyVals: keyVals || '',
					weight: '',
					priceSale: "",
					priceMarket: "",
					priceCost: "",
					priceTuan: "",
					priceFanli: "",
					kucun: '',
					code: ""
				};
				duo_guigezhiList.push(info);
				// this.cacheMap[info.specificationsText] = [];
			});

			this.duo_guigezhiList = duo_guigezhiList;

			this.$log('规格数据 duo_guigezhiList', this.duo_guigezhiList)
		},

		// 新增一级规格组
		add_sku_v1() {
			this.add_inputVisible = true;

			this.$nextTick(() => {
				let dom = document.querySelector(".cus-v1-input");
				console.warn("dom", dom);
				if (dom) {
					dom.focus();
				}
			});
		},
		// 移除一级规格组
		remove_sku_v1(v1, v1_index) {
			this.$confirm('确认删除该规格,该操作将会重新生成规格数据?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// this.guige_group_list.splice(v1_index, 1);
				// this.generateGuigezhi();

				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "product_delKey",
						id: v1.id,
					}
				}).then((res) => {
					this.guige_group_list.splice(v1_index, 1);
					this.generateGuigezhi();
					this.$log('所有规格', this.duo_guigezhiList)
				})

			}).catch(() => {

			});
		},
		// 确认一级规格值
		async confirm_add_sku_v1() {
			//规格名
			let sku_title = this.add_inputValue.trim();
			if (sku_title) {
				let has_same_title = this.guige_group_list.find((v) => v.title == sku_title);
				if (has_same_title) {
					alertErr("当前分类名称已存在！");
				} else {

					//新增规格
					this.$api({
						url: '/admin_service.php',
						method: 'get',
						data: {
							action: 'product_setKey',
							productId: this.productid, //创建时传 0
							title: sku_title, //商品名称
							parentId: 0, //	所属上级
						}
					}).then((res) => {
						if (res.code == 200) {
							this.res_skus = res.data.skus
							let id = this.getSkuId({
								deep: 1,
								title: sku_title,
								ids: []
							})

							if (!this.productid) {
								this.productid = res.data.productId
							}

							this.guige_group_list.push({
								id: id,
								title: sku_title, //颜色  尺寸  
								inputVisible: false,
								child: [],
							});

							this.add_inputVisible = false;
							this.add_inputValue = "";
							this.generateGuigezhi();
						}
					});
				}
			}
		},

		// 新增二级规格值
		add_sku_v2(v1, v1_index) {
			console.warn("分组", {
				...v1
			});
			v1.inputVisible = true;

			this.$nextTick((_) => {
				let dom = document.querySelector('.cus-v2-input[data-index="' + v1_index + '"]');
				console.warn("dom", dom);
				if (dom) {
					dom.focus();
				}
			});
		},
		//移除2级规格值
		remove_sku_v2(v2, v2_index, v1, v1_index) {
			this.$log('删除二级规格', v2)
			this.$log('所有规格', this.duo_guigezhiList)

			this.$confirm('该操作将会移除相关规格数据，确认删除该规格项?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {

				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "product_delKey",
						id: v2.id,
					}
				}).then((res) => {
					v1.child.splice(v2_index, 1);
					let filter_list = [];
					this.duo_guigezhiList.forEach(v => {
						let id_arr = v.keyIds.split('-').map(v => parseInt(v))
						if (!id_arr.includes(v2.id)) {
							filter_list.push(v)
						}
					})
					this.duo_guigezhiList = filter_list;


					if (this.duo_guigezhiList.length == 0) {
						this.generateGuigezhi();
						this.duo_guigezhiList.forEach(v => {
							v.id = ''
						})
					}
					this.$log('所有规格', this.duo_guigezhiList)
				})
			}).catch(() => {

			});
		},
		// 2级规格值确认新增
		async confirm_sku_v2(v1) {
			this.$logjson('v1', v1)
			// return
			let sku_title = v1.inputValue.trim();
			if (sku_title) {
				let has_same_title = v1.child.find((v) => v.title == sku_title);
				if (has_same_title) {
					alertErr("当前分类名称已存在！");
				} else {


					//新增规格
					this.$api({
						url: '/admin_service.php',
						method: 'get',
						data: {
							action: 'product_setKey',
							productId: this.productid, //创建时传 0
							title: sku_title, //商品名称
							parentId: v1.id || 0, //	所属上级
						},
					}).then((res) => {
						if (res.code == 200) {
							this.res_skus = res.data.skus
							let id = this.getSkuId({
								deep: 2,
								title: sku_title,
								ids: [v1.id]
							})

							v1.child.push({
								id: id,
								title: sku_title,
							});

							v1.inputVisible = false;
							v1.inputValue = "";
							this.generateGuigezhi();
						}
					});
				}
			}
		},

		getSkuId(option) {
			let {
				deep,
				title,
				ids
			} = option
			let id = ''
			if (ids.length == 0) {
				let level1 = this.res_skus.find(v => v.title == title) || {}
				id = level1.id
			} else if (ids.length == 1) {
				let level1 = this.res_skus.find(v => v.id == ids[0]);
				let level2 = level1.childs.find(v => v.title == title);
				id = level2.id
			} else if (ids.length == 2) {
				let level1 = this.res_skus.find(v => v.id == ids[0]);
				let level2 = level1.childs.find(v => v.id == ids[1]);
				let level3 = level2.childs.find(v => v.title == title);
				id = level3.id
			} else if (ids.length == 3) {
				let level1 = this.res_skus.find(v => v.id == ids[0]);
				let level2 = level1.childs.find(v => v.id == ids[1]);
				let level3 = level2.childs.find(v => v.id == ids[2]);
				let level4 = level3.childs.find(v => v.title == title);
				id = level4.id
			}

			return id || ''
		},

		handle_guigezhi_upload_image_request(uploadInfo, guige) {
			console.warn("handle_upload_image_request uploadInfo", uploadInfo);
			console.warn("handle_upload_image_request guige", {
				...guige
			});

			const formData = new FormData();
			let file = uploadInfo.file;
			formData.append("file", file);

			this.$apiUploadImage({
				file: file
			}).then((res) => {
				console.warn("图片上传res", res);
				if (res.code == 200) {
					let url = res.data.url;
					guige.imgUrl = url;
				}
			});
		},

		handle_guigezhi_upload_image_remove(option) {
			let {
				file,
				fileList,
				guige
			} = option;
			let url = file.url;
			guige.imgUrl = "";
		},

		handle_guigezhi_upload_image_success(res, file) {
			console.warn("handle_upload_image_success");
			console.log("上传", res);
			if (res.code == 200) { }
		},
		handle_guigezhi_upload_image_before(file) {
			console.warn("handle_upload_image_before");
			const isLt2M = file.size / 1024 / 1024 < 50; //文件大小
			return isLt2M;
		},

		// 新增一级分类
		// 规格操作

		handleInputSame(key) {
			console.warn('key = ', key)
			console.warn('value = ', this.sameInfo[key])
			this.duo_guigezhiList.forEach(v => {
				v[key] = this.sameInfo[key]
			})
		},

		// 上传配置
		upload_before_upload(file) {
			console.warn("upload_before_upload");
			const isLt50M = file.size / 1024 / 1024 < 50; //文件大小 小于 50MB
			return isLt50M;
		},
		upload_on_success(option) {
			this.$log('上传', option)

			let {
				// item,
				res,
				file,
				fileList,
				v1,
				v2
			} = option
			this.$log("upload_on_success option", option);
			if (res.code == 200) {
				let url = res.data.url;


				this.update_sku_thumb({
					id: v2.id,
					thumb: url,
					v1: v1,
					v2: v2,
				})


				// this.imageUrl = url;
				// this.$emit('uploadChange', {
				// 	sku: this.sku,
				// 	url: url
				// })
			} else {
				alert(res)
			}
		},
		upload_on_remove(option) {
			let {
				file,
				fileList,
				v1,
				v2,
			} = option;
			this.$log('上传删除 option', option)
			// this.upload_result_map[item.field] = fileList;

			// v2.thumb = ''

			this.update_sku_thumb({
				id: v2.id,
				thumb: '',
				v2: v2,
			})
		},
		upload_on_preview(file) {
			this.preview_image_url = file.url;
			this.preview_image_is_show = true;
		},

		isImageUrl(url = '') {
			// 定义一个包含图片扩展名的数组  
			const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'];

			// 获取URL的最后一个部分（通常是文件名），然后检查其扩展名是否在数组中  
			const extension = url.split('.').pop().toLowerCase();
			return imageExtensions.includes(extension);
		},


		do_on_success(scope, res, file, fileList) {
			const uploadedUrl = scope.res.data.url;

			// 将上传后的URL赋给scope.row.url
			scope.scope.row.url = uploadedUrl;

		},
		//上传配置
		uploadChange(option) {
			this.$log('规格图回调', option)
			let {
				sku,
				url
			} = option
			//规格操作-更新
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: 'product_updateKey',
					id: sku.id, //
					thumb: url, //	
				},
			}).then((res) => {
				if (res.code == 200) {

				}
			});
		},

		update_sku_thumb(option) {
			this.$log('更新sku 缩略图', option)
			let {
				id,
				thumb,
				v2
			} = option
			//规格操作-更新
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: 'product_updateKey',
					id: id, //
					thumb: thumb, //	
				},
			}).then((res) => {
				if (res.code == 200) {
					v2.thumb = thumb;
				}
			});
		},
	},
};
</script>

<style scoped lang="less">
.page-wrap {
	position: relative;

	.page-inner {}
}

.footer-actions {
	display: flex;
	justify-content: flex-end;
	justify-content: center;
	position: fixed;
	z-index: 100;
	bottom: 0;
	right: 0;
	left: 190px;
	padding: 10px;
	background: #fff;
	box-shadow: 0 0 1px 0 #ccc;
	padding-right: 35px;
}

.page-ctx-wrap {
	background: #fff;
	padding: 20px;
	border-radius: 6px;
	padding-bottom: 100px;
}

/deep/ .upload-image .el-upload {
	width: 100px;
	height: 100px;
	line-height: 98px;
}

/deep/ .guige-upload-box {
	&.uploaded {
		>.guige-upload-image>.el-upload {
			display: none;
		}
	}

	.el-upload-list--picture-card .el-upload-list__item {
		width: 60px;
		height: 60px;
	}
}

/deep/ .guige-upload-image .el-upload {
	width: 60px;
	height: 60px;
	line-height: 58px;
}

/deep/ .upload-video .el-upload {
	width: 100px;
	height: 100px;
	line-height: 98px;

	background-color: #fbfdff;
	border: 1px dashed #c0ccda;
	border-radius: 6px;
	box-sizing: border-box;
	cursor: pointer;
	vertical-align: top;
}

/deep/ .el-upload-list__item {
	background: #eef6ff !important;
	font-size: 16px;
}

.table {
	display: flex;
	justify-content: space-between;

	div {
		width: 20%;
	}
}

.video-preview-box {
	margin-top: 20px;
}

.section-box {
	padding: 30px 0;

	.section-title {
		height: 44px;
		line-height: 44px;
		background: #eee;
		padding: 0 20px;
		font-size: 14px;
	}

	.section-subtitle {
		margin-top: 15px;
		height: 44px;
		line-height: 44px;
		background: #f9f9f9;
		padding: 0 20px;
		font-size: 14px;
	}

	.section-ctx {
		margin-top: 30px;
	}

	.guige-inner {
		padding: 30px;
		// padding-bottom: 200px
	}
}

// 处理表单样式
.input-items {
	.flex();
	flex-wrap: wrap;
	padding-bottom: 0px;

	.input-item {
		margin-bottom: 20px;
		width: 100%;
		// width: 50%;

		&.hidden-item {
			display: none;
		}

		&:last-child {
			margin-bottom: 0;
		}

		.input-box {
			width: 100%;
			display: flex;
			align-items: flex-start;

			.label {
				height: 32px;
				line-height: 32px;
				min-width: 160px;
				min-width: 100px;
				text-align: right;
				margin-right: 40px;
				font-size: 20px;
				font-size: 14px;
				font-family: PingFang SC;
				color: #666666;

				&.required {
					position: relative;

					&:after {
						content: "*";
						color: #f00;
						position: absolute;
						right: -15px;
						top: 3px;
						// font-weight: bold;
					}
				}
			}
		}

		//输入框组
		.inputs {
			.flex();

			.date-box {
				flex: 1;
			}

			.shuru-box {
				margin-left: 20px;
				flex: 4;
			}
		}

		.val {
			overflow: hidden;
			flex: 2;
			font-size: 20px;
			font-family: PingFang SC;
			color: #000000;

			&[data-type="treeSelect"] {
				overflow: visible;
			}

			.shuru {
				width: 100%;
				padding-left: 20px;
				outline: none;
				height: 40px;
				background: #ffffff;
				border: 1px solid #d4d8eb;
				border-radius: 4px;
				font-size: 16px;
			}

			.form-ele {
				.el-input {
					width: 100%;
				}

				.el-select {
					width: 100%;
				}

				.el-cascader {
					width: 100%;
				}
			}
		}
	}
}



// 基础信息
.section-base {

	// 页签
	.tab-card-box {
		margin-top: 20px;

		.loop-add {
			margin-top: 20px;
			text-align: center;
		}
	}

	// 标签输入
	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 120px !important;
		margin-left: 0;
		vertical-align: bottom;
	}

	.el-tag+.input-new-tag {
		margin-left: 15px;
	}

	// 标签输入

	// 树形选择
	.tree-box {
		position: relative;
	}

	// 树形选择
}

.table-sec {
	overflow-x: scroll;

	.factorAdd {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.loop-add {
		margin-top: 20px;
		text-align: center;
	}
}

// 参数信息
.section-params {

	// 循环体数据
	.loop-wrap {
		.loop-item {
			display: flex;

			.sub {}
		}


	}
}

// 规格信息
.section-guige {

	// 标签样式
	.cus-tag-item {
		margin-right: 15px;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.cus-tag-input {
		-webkit-appearance: none;
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		outline: 0;
		padding: 0 15px;
		width: 90px;
		height: 32px;
		line-height: 32px;
		transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

		&:focus {
			border-color: #66b1ff;
		}
	}

	// 标签样式

	.guige-tip {
		color: coral;
	}

	table {
		border-spacing: 0;
		width: max-content;
	}

	.table-box {
		width: 100%;
		border-collapse: 0;
		/* table-layout: fixed; */
		border: 1px solid #eee;
		font-size: 14px;
	}

	.table-box tr {
		/* min-height: 40px; */
	}

	.table-box th {
		text-align: left;
		padding: 10px 10px;
		border-right: 1px solid #eee;
	}

	.table-box td {
		text-align: left;
		padding: 10px 10px;
		border-top: 1px solid #eee;
		border-right: 1px solid #eee;
	}

	.table-box .tag-item {
		cursor: pointer;
		outline: none;
		user-select: none;
		margin-right: 10px;
		display: inline-flex;
		align-items: center;
		color: #333;
	}

	.table-box .tag-item:before {
		content: "";
		width: 20px;
		height: 20px;
		display: inline-block;
		background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-0.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		margin-right: 3px;
	}

	.table-box .tag-item.checked:before {
		background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-1.png");
	}

	.table-box-guige td:nth-child(1) {
		width: 20%;
	}

	.table-box-guige td:nth-child(2) {
		width: 80%;
	}

	.table-box-guigezhi td:nth-child(1) {
		width: 25%;
	}

	.table-box-guigezhi td:nth-child(2) {
		width: 25%;
	}

	.table-box-guigezhi td:nth-child(3) {
		width: 25%;
	}

	.table-box-guigezhi td:nth-child(4) {
		width: 25%;
	}
}




.table-tag-box {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>

<style lang="less">
.pop-tree {
	// position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	top: 32px;
	max-height: 300px;
	max-height: 400px;
	overflow-y: auto;
	// border: 1px solid #ccc;
	border-top: none;

	&::-webkit-scrollbar-thumb {
		border-radius: 3px;
		border: 5px solid #bbb;
		background: #fff;
	}

	&::-webkit-scrollbar {
		width: 5px;
		height: 0px;
	}
}



.guige-inner {
	.guige-type-select {
		.input-item {

			.input-box {
				.label {
					text-align: left;
					width: fit-content;
					min-width: fit-content;
				}

				.val {
					min-height: 32px;

					.form-ele {
						min-height: 32px;

						.el-radio-group {
							min-height: 32px;

							.el-radio {
								min-height: 32px;
								line-height: 32px;
							}
						}
					}
				}
			}
		}
	}
}


.custom-upload {
	text-align: left;
	margin-top: 10px;

	&.is_uploaded {
		.el-upload {
			display: none;
		}
	}


	/deep/ .el-upload {
		text-align: left;
	}

	.el-upload-list__item {
		width: 80px;
		height: 80px;
	}

	.el-upload--picture-card {
		width: 80px;
		height: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.upload-image {
		width: 50px;
		height: 50px;
	}
}
</style>